<% content_for :stylesheet_head do %>
    <style type="text/css">
    *{margin: 0px; padding:0px;}
        html{height: 100%;}
        hr.style-four {
            margin: 0;
                height: 5px;
                border: 0;
                box-shadow: inset 0 12px 12px -12px rgba(0, 0, 0, 0.5);
            }
        iframe{width: 100%;height: 100%;border: 0px;}
        a{cursor: pointer;}
        #nav{
          margin: 0px;
        }
        .menu_list {
            box-shadow: 0px 0px 0px 0px;
        }
        p.menu_head{
          line-height: 18px;font-size: 14px;
        }
    </style>
<%end%>
<% content_for :javascript_head do %>
    <script type="text/javascript" src="js/vendor/jquery-1.11.2.min.js"></script>
    <script type="text/javascript">
               // 监听路由变化     显示内容变化
        function Router() {
            this.routes = {};
            this.currentUrl = '';
        }
        Router.prototype.route = function(path, callback) {
            this.routes[path] = callback || function(){};
        };
        Router.prototype.refresh = function() {
            this.currentUrl = location.hash.slice(1) || '/';
                // alert("/"+this.currentUrl);
            if(this.currentUrl == "/"){
                $("iframe").attr("src","/main");
            }else{
                $("iframe").attr("src","/"+this.currentUrl);
            }
         };
        Router.prototype.init = function() {
            window.addEventListener('load', this.refresh.bind(this), false);
            window.addEventListener('hashchange', this.refresh.bind(this), false);
        }
        window.Router = new Router();
        window.Router.init();
        Router.route('/', function() {
            // console.log(location.hash)
        });

        // $(function () {

         // })
    </script>
<%end%>
<!-- <body style="background: #d2d2d2 url('img/bodybg.png') repeat-x;"> -->
<body style="background: #d5d5d5;">
    <div id="headercontainer"  style="background: #1c612f;">
        <img src="assets/Logo.png" alt="logo" class="mobilizelogo" style="width:81px;repeat:repeat-x;">
        <sapn style="color:white;font-size:45px;font-family:'微软雅黑' ">智慧社区治安管理系统</sapn>
        <div class="logindetails">
            <p>
                <span>欢迎</span>
                <a href="javascript:;"><span style="font-size: 20px;"><%=session[:name]%></span></a>or
                <a href="javascript:;" onclick="location.href='/logout' ">退出</a>
            </p>
            <p>
                <a href="javascript:;"><img src="img/helpicon.png" alt="help icon"></a>
                <a href="javascript:;" onclick="">帮助</a>
            </p>
        </div>
        <!--End logindetails-->
    </div>
    <div id="wrapper">
        <div id="nav">
            <div class="menu_list">
                <p class="menu_head" id="nav_opsetup">
                     酒店资料
                </p>
                <div class="menu_body">
                     <a href="#hotel" >
                         酒店管理
                     </a>
                </div>

                <p class="menu_head" id="nav_opreport">
                    住客审核
                </p>
                <div class="menu_body">
                    <a href="#record_data" >
                       入住审核
                    </a>
                    <a href="#alarm_record" >
                       报警审核
                     </a>
                </div>
                <p class="menu_head" id="nav_mgmtreport">数据查询</p>
                <div class="menu_body">
                    <a onclick=" open_report(' <%=get_report("hotel_detail",2)%>' ); "  >
                        酒店数据
                    </a>
                    <a onclick=" open_report(' <%=get_report("alarm_detail",2)%>' ); "  >
                        报警数据
                    </a>
                    <a onclick=" open_report(' <%=get_report("record_in_out",1)%>' ); "  >
                        停车场数据
                    </a>
                    <a onclick=" open_report(' <%=get_report("pass_record_list",1)%>' ); ">
                        门禁数据
                    </a>
                    <a onclick=" open_report(' <%=get_report("dict_house_detail",1)%>' ); " >
                        物业数据
                    </a>
                </div>
                <p class="menu_head" id="">系统配置</p>
                <div class="menu_body">
                    <a href="#user_sys" >
                       账号管理
                    </a>
                    <a href="#section" >
                       组织机构
                    </a>
                </div>
                <a href="#" class="navLink" onclick="location.href='/logout'">
                    <p class="menu_head" id="nav_logout">退出</p>
                </a>
            </div>
            <!--End menu_list-->            
        </div>
          <a class="btn btn-success" id="hotel_ajax" href="#record_data" >住宿提示</a>
          <a class="btn btn-danger" id="ala_ajax"   href="#alarm_record" >报警提示</a>
          <span style="display:none;" id="section_id"><%=session[:section_id]%></span>
        <!-- nav -->
        <div id="maincontent" style="margin-bottom: 0px;">
            <iframe src=""></iframe>
            <script type="text/javascript">
            $("iframe").attr("style","width:100%;height:"+JSON.stringify($("html").height()-171)+"px");
            </script>
        </div>
        <div style="width: 400px;height: 45px;margin: 0 auto;text-align: center;z-index: 10;line-height: 45px;">Copyright © 2017 GZ Computer System Limited</div>
    </div>
</div>
</body>
<% content_for :stylesheet_fool do %>
    <style type="text/css">
        table tr th{text-align: center;}
        tr td button {
            padding: 2px 5px;
            margin: 0px 3px;
            border-radius: 4px;
            border: 1px;
            color: #fff;
        }
        #hotel_ajax{
             position: absolute;
             bottom: 40px;
             left: 20px;
             display:none;
        }
        #ala_ajax{
             position: absolute;
             bottom: 90px;
             left: 20px;
             display:none;
        }
        #status{
            position: absolute;
            bottom: 10px;left: 20px;border-radius: 5px;
        }
        .status{
            color: #fff;width: 200px;line-height: 30px;text-align: center;margin-bottom: 10px;cursor: pointer;
        }
        .green{
            background: #02d806;
        }
        .red{
            background: red;
        }
    </style>
<% end %>

<% content_for :javascript_fool do %>
      <script type="text/javascript"> 
    $(function(){
                hotel_ajax=$("#hotel_ajax")
                ala_ajax=$("#ala_ajax")
                // ala_ajax[0].style.display='' 
                var hotel_display,ala_display;

                jQuery.fn.shake = function (intShakes /*Amount of shakes*/, intDistance /*Shake distance*/, intDuration /*Time duration*/) {  
                    this.each(function () {  
                        var jqNode = $(this);  
                        // jqNode.css({ position: 'relative' });  
                        for (var x = 1; x <= intShakes; x++) {  
                            jqNode.animate({ left: (intDistance * -1) }, (((intDuration / intShakes) / 4)))  
                            .animate({ left: intDistance }, ((intDuration / intShakes) / 2))  
                            .animate({ left: 6 }, (((intDuration / intShakes) / 4)));  
                        }  
                    });  
                    return this;  
                } 

                function ajax(){                      
                      a=$("#section_id").text();
                      var url="/page/ajax_load?id="+a;
                      $.ajax({url:url,
                              async:true,
                              type: "get",
                              success:function(r){                                
                                      a=JSON.parse(r);  
                                      alarm=a.alarm;
                                      hotle=a.hotel;
                                      console.log(alarm);
                                        if (alarm==0)
                                        {
                                           ala_ajax[0].style.display='none' 
                                            if (ala_display!=undefined)
                                            {
                                                clearInterval(ala_display)
                                            }
                                        }     
                                        else
                                        {
                                           ala_ajax[0].style.display='block' 
                                           ala_display=setInterval(function(){
                                                  // $( '#ala_ajax' ).flash( '251,0,0', 4000 );
                                                // $('#ala_ajax').toggle(300)
                                                $("#ala_ajax").shake(1,5, 200);
                                           }, 3000) 
                                        }
                                        if (hotle==0)
                                        {
                                           hotel_ajax[0].style.display='none' 
                                           if (hotel_display!=undefined)
                                            {
                                                clearInterval(hotel_display)
                                            }
                                        }   
                                        else
                                        {
                                           hotel_ajax[0].style.display='block'                                     
                                             hotel_display=setInterval(function(){
                                                  // $( '#hotel_ajax' ).flash( '200,0,0', 4000 );
                                                   // $('#hotel_ajax').toggle(300)
                                                   $("#hotel_ajax").shake(1, 5, 200);
                                           }, 3000)
                                        }    

                                        setTimeout(ajax,3000);
                                                 },
                               error:function(){
                                     setTimeout(ajax,3000);
                               }
                           })
                 }
                $("#hotel_ajax").click=function(){
                   //住宿提示方法
                   
                }
                 $("#ala_ajax").click=function(){
                    //报警提示方法
                }
                setTimeout(ajax,3000);
    })
    
        function  open_report(url){
                 javascript:window.open(url);
        }      
      </script>
<% end %>